Definición de Image map (en HTML)

 

Definición de Image map (en HTML)

 

En HTML, un image map o mapa de imagen es una técnica que permite definir varias áreas sensibles en una misma imagen, de modo que cada área puede estar asociada a un enlace diferente. Esto permite que al hacer clic en distintas partes de la imagen, el usuario sea redirigido a diferentes direcciones o páginas.

Para crear un mapa de imagen en HTML, se utilizan las etiquetas <map> y <area>. La etiqueta <map> define el mapa y se asocia a una imagen mediante el atributo usemap en la etiqueta <img>. Dentro de <map>, se utilizan varias etiquetas <area> para definir las zonas interactivas, especificando su forma (shape), coordenadas (coords) y el destino del enlace (href).

Ejemplo básico:

<img src="planeta.jpg" usemap="#mapaPlaneta" alt="Planeta Tierra">

<map name="mapaPlaneta">

  <area shape="rect" coords="34,44,270,350" href="america.html" alt="América">

  <area shape="circle" coords="477,300,44" href="oceania.html" alt="Oceanía">

</map>

En este ejemplo, diferentes áreas de la imagen llevan a páginas distintas según el lugar donde se haga clic.

Aplicaciones de los mapas de imagen

• Creación de menús gráficos interactivos.


• Presentación de infografías donde cada sección enlaza a información detallada.


• Juegos o actividades educativas en línea.


• Botones o zonas de acción en interfaces visuales.

Ventajas de los mapas de imagen

• Permiten agregar múltiples enlaces en una sola imagen, optimizando el espacio visual.


• Mejoran la interactividad y navegación en presentaciones gráficas complejas.

Desventajas de los mapas de imagen

• Difícil de mantener y modificar, especialmente en imágenes grandes o con muchas áreas.


• Pueden presentar problemas de accesibilidad si no se añaden descripciones adecuadas (alt y title).


• No son adaptativos por defecto; pueden fallar en diseños responsive sin técnicas adicionales.


• Su uso ha disminuido frente a técnicas modernas como CSS y JavaScript para crear interfaces interactivas.

Comparación con tecnologías similares

• CSS y JavaScript: Permiten crear interfaces más dinámicas y adaptables, con mayor control sobre la accesibilidad y la experiencia de usuario.


• Sprites de imagen: Optimizan la carga de imágenes y pueden combinarse con CSS para lograr efectos similares a los mapas de imagen, pero con mejor rendimiento y adaptabilidad.

Optimización y buenas prácticas

• Utilizar imágenes de tamaño adecuado y optimizadas para la web.


• Agregar atributos alt y title descriptivos en cada <area> para mejorar la accesibilidad.


• Verificar la correcta asociación entre la imagen y el mapa mediante el atributo usemap.


• Testear el funcionamiento en diferentes navegadores y dispositivos.


• Considerar alternativas modernas si se requiere adaptabilidad o interactividad avanzada.

Resumen: Image map

Un mapa de imagen en HTML permite definir diferentes zonas sensibles dentro de una imagen, cada una enlazando a destinos distintos. Es útil en casos donde se requiere una navegación gráfica específica, aunque su uso ha disminuido frente a tecnologías más modernas y adaptativas.





Autor: Leandro Alegsa
Actualizado: 11-06-2023

¿Cómo citar este artículo?

Alegsa, Leandro. (2023). Definición de Image map. Recuperado de https://www.alegsa.com.ar/Dic/image_map.php

---